<template>
    <div class="content">

        <Header />
        <div class="infomation">
            <div id="main"></div>
        </div>
    </div>
</template>

<script>
import Header from '../components/common/Header'
import * as echarts from 'echarts';

export default {
    components: {
        Header
    },
    data(){
        return {
            chartDom:'',
            myChart: '',
            option : {
                title: {
                    text: '招聘岗位关键词本周搜索趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    
                    data: ['Java开发工程师', 'PHP开发工程师', 'Web开发工程师', 'NodeJs开发工程师', 'Python开发工程师']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name: 'Java开发工程师',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                    name: 'PHP开发工程师',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                    name: 'Web开发工程师',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                    name: 'NodeJs开发工程师',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                    name: 'Python开发工程师',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            }
        }
    },
    methods: {
        draw(){
            this.chartDom = document.getElementById('main');
            this.myChart = echarts.init(this.chartDom);
            this.option && this.myChart.setOption(this.option);
        }
    },
    mounted () {
        this.draw();
    }
}
</script>

<style>
.content {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 auto;
}
.infomation{
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
#main{
    margin-top: 50px;
    width: 1200px;
    height: 600px;
}

</style> 